
import { Avatar, Button } from 'antd';
import { LoadingOutlined } from '@ant-design/icons'
import { publish } from 'pubsub-js';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { getCheckJoinGroup } from '../../assets/js/api';
import { imgUrlDev } from '../../assets/js/tools';
import { showGroupInfo } from '../../event-type';
import {
    message_user_message,
    message_user_txt,
    message_add_message,

    chose_message_wrapper,
    link_txt,
    chose_message_avator,
    chose_message_title,
    chose_message_top,
    chose_message_bottom,
    chose_message_btn,
} from './index.module.css'


function ChoseMessage(props) {

    const {
        checked,
        user_name, 
        user_avator, 
        about_user_id, 
        group_name, 
        group_avator, 
        about_group_id, 
        message_content, 
        add_message
    } = props;

    const [loading, setLoading] = useState(false);
    const [check, setCheck] = useState(checked);

    function publishGroupInfo() {
        publish(showGroupInfo, { group_id:about_group_id, group_name, group_avator });
    }
    function checkMessage(confirm) {
        // 提交处理
        if (loading) return;
        setLoading(true);

        getCheckJoinGroup({
            user_id: about_user_id,
            group_id: about_group_id,
            confirm
        })
        .then(res => {
            const {code} = res.data;
            if (code === 1) {
                setCheck('1');
            }
        })
        .catch(err => {
            console.log(err);
        })
        .finally(() => {
            setLoading(false);
        });
    }


    return (
        <div className={`${chose_message_wrapper} ${message_user_message}`}>
            <div className={chose_message_top}>
                <Avatar className={chose_message_avator} src={imgUrlDev(user_avator)} size={60} />
                <div className={chose_message_title}>
                    <Link className={link_txt} to={{pathname: `/info/${about_user_id}`}} target="_blank">{user_name}</Link>
                    <span className={message_user_txt}>{message_content}</span>
                    <span className={link_txt} onClick={publishGroupInfo}>{group_name}</span>
                    
                    <div className={message_add_message}>
                        附加消息：{add_message}
                    </div>
                </div>
            </div>
            <div className={chose_message_bottom}>
                {
                    loading ? 
                        <LoadingOutlined /> :
                        check === '1' ? 
                            '已处理' :
                            <>
                                <Button className={chose_message_btn} type="primary" onClick={() => {checkMessage(true)}}>同意</Button>
                                <Button className={chose_message_btn}  onClick={() => {checkMessage(false)}}>拒绝</Button>
                            </>
                }
            </div>
        </div>
    )
}


export default ChoseMessage;